<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
          "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hyperbolic tree</title>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <style type="text/css">
      .tooltip { background-color: #e0e0e0; }
      .overlay { background-color: white; }
      .text { border: 1px solid #808080; }

      .tooltip {
        padding: 0.4em;
        white-space: nowrap;
        z-index: 1;
      }
      .overlay {
        background-color: white;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 2;
      }
      .translucent {
        background-color:rgba(0,0,0,0.7)
      }
      .button .on { visibility:hidden; }
      .button:hover .on { visibility:visible; }
      .button:hover .off { visibility:hidden; }
      .filled_button.on {
	background: -webkit-gradient(linear, left top, left bottom, from(#707080), to(#383848));
	background: -moz-linear-gradient(top, #707080 ,  #383848);
	background: -o-linear-gradient(top, #707080 ,  #383848);
        background-color: #606070;
      }
      .filled_button.off {
	background: -webkit-gradient(linear, left top, left bottom, from(#404050), to(#303040));
	background: -moz-linear-gradient(top,  #404050,  #303040);
	background: -o-linear-gradient(top,  #404050,  #303040);
        background-color: #303040;
      }
      .text {
        background-color: white;
        border-radius: 2px 2px 2px 2px;
        padding: 0.4em;
        overflow: auto;
      }
      .text p { margin: 0px; }
      .text dl {
        margin-top:0;
        margin-bottom:0;
      }
      .text dd {
        font-weight:bold;
        margin-left:0;
      }
      .text dt { margin-bottom:0.4em; }
      .text ul { padding-left:10px; }
      .text li { list-style-type: none; }
    </style>
    <script type="text/javascript">
      var hyp_style =
        { border: 0.5,
          boundaryColor: "#b4b4b4",
          treeColor: "#794c0d",
          nodeBackgroundColor: "#794c0d", nodeColor: "black",
          buttonColor: "black" };
    </script>
  </head>
    <body>
          <script type="text/javascript" src="hypertree.js"></script>
  </body>
</html>
